.neo-grid-header-button {
    align-items     : center;
    background-color: var(--grid-header-button-background-color);
    background-image: var(--grid-header-button-background-image);
    border          : 1px solid transparent;
    border-radius   : 0;
    color           : var(--grid-header-button-color);
    cursor          : pointer;
    display         : flex;
    flex-direction  : row;
    flex-shrink     : 0;
    font-size       : var(--grid-header-button-font-size);
    font-weight     : 600;
    height          : 29px; // Webkit => Safari can not handle 100%
    justify-content : flex-end;
    margin          : 0;
    transition      : var(--grid-header-button-transition);
    white-space     : nowrap;

    &:not(:last-child) {
        border-right-color: var(--grid-header-button-border-right-color);
    }

    &:hover {
        border-color: var(--grid-header-button-border-hover-color);
        box-shadow  : var(--grid-header-button-box-shadow-hover);

        &:not(:last-child) {
            border-right-color: var(--grid-header-button-border-right-hover-color);
        }
    }

    &.neo-locked {

    }

    &.neo-drag-over {
        background-image: linear-gradient(green, darkgreen);;
    }

    &.neo-sort-asc, &.neo-sort-desc {
        .neo-button-glyph {
            opacity: 1;
        }
    }

    &.neo-sort-hidden {
        .neo-button-glyph {
            opacity: 0;
        }
    }

    &.neo-sort-desc {
        .neo-button-glyph {
            transform: rotate(180deg);
        }
    }

    &:focus {
        outline : 0;
    }

    &.icon-right {
        flex-direction: row-reverse;

        .neo-button-glyph {
            margin: 0 0 0 6px;
        }
    }

    .neo-button-glyph {
        color         : var(--grid-header-button-glyph-color);
        font-size     : 12px;
        margin        : 0 6px 0 0;
        opacity       : 0;
        pointer-events: none;
        transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change   : opacity, transform;
    }

    .neo-button-text {
        color         : var(--grid-header-button-color);
        pointer-events: none;
        text-transform: none;

        @media (max-width: 600px) {
            // Default Buttons use a slightly bigger font-size, which does not make sense here
            font-size: var(--button-text-font-size);
        }
    }
}
